<template>
    <div class="song-list">
        <!--头部信息-->
        <PartTitle :title-info="titleInfo"/>
        <el-row v-for="rows in playList" :key="rows.id" style="margin-bottom: 1vh">
            <el-col :span="4" v-for="(columns,index) in rows.data" :key="columns.id" :offset="index === 0 ? 0 : 1">
                <list-item :item-description="columns"/>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ListItem from "@/minicomponents/ListItem.vue";
import PartTitle from "@/minicomponents/PartTitle.vue";
import {
    ALBUMLIST,
    ALUBMLISTNOAUTHOR,
    ALUBMLISTNOAUTHORWITHTYPE,
    RECSONGLIST,
    SINGERLIST, SINGERSMVs, SINGERSMVsNOTIME,
    TOPLIST
} from "@/http/constant";
import {timeStampToYear} from "@/http/tools";

export default {
    name: "SongPart",
    props: ['musicList'],
    data() {
        return {
            playList: []
        }
    },
    components: {
        ListItem,
        PartTitle
    },
    computed: {
        // 每一部分的头部信息
        titleInfo() {
            const {type, title, specialRoutes, isShowAll, isChange, otherInfo} = this.musicList
            return {
                type,
                title,
                specialRoutes,
                isShowAll,
                isChange,
                otherInfo
            }
        }
    },
    watch: {
        musicList: {
            deep: true,
            handler(newVal, oldVal) {
                if (newVal.type === RECSONGLIST) {
                    this.playList = newVal.musicList.map(rowItem => {
                        return {
                            id: rowItem.id,
                            data: rowItem.data.map(columnItem => {
                                return {
                                    id: columnItem.id,
                                    title: columnItem.name,
                                    picUrl: columnItem.picUrl,
                                    playCount: columnItem.playCount,
                                    type: columnItem.type,
                                    // 是否是圆形图片
                                    isCircle: false,
                                    // 是否有歌手名称
                                    hasAuthor: false,
                                    // 标题是否靠左
                                    titleIsLeft: true,
                                    // 是否有播放数量
                                    hasPlayCount: true,
                                    // 列表项类型
                                    itemType: newVal.type,
                                    // 是否有中间的播放图标
                                    hasPlayIcon: true
                                }
                            })
                        }
                    })
                } else if (newVal.type === ALBUMLIST || newVal.type === ALUBMLISTNOAUTHOR || newVal.type === ALUBMLISTNOAUTHORWITHTYPE) {
                    // 专辑信息
                    this.playList = newVal.musicList.map(rowItem => {
                        return {
                            id: rowItem.id,
                            data: rowItem.data.map(columnItem => {
                                let author = ''
                                switch (newVal.type) {
                                    case  ALBUMLIST:
                                        author = columnItem.artist.name
                                        break
                                    case ALUBMLISTNOAUTHOR:
                                        author = `Album · ${timeStampToYear(columnItem.publishTime)}`
                                        break
                                    case ALUBMLISTNOAUTHORWITHTYPE:
                                        author = `${columnItem.type} · ${timeStampToYear(columnItem.publishTime)}`
                                        break
                                }
                                return {
                                    id: columnItem.id,
                                    title: columnItem.name,
                                    picUrl: columnItem.picUrl,
                                    hasPlayCount: false,
                                    isCircle: false,
                                    hasAuthor: true,
                                    titleIsLeft: true,
                                    author,
                                    company: columnItem.company,
                                    itemType: newVal.type,
                                    hasPlayIcon: true
                                }
                            })
                        }
                    })
                } else if (newVal.type === SINGERLIST) {
                    // 推荐歌手部分这里暂不使用，通过ImageSwiper做成了走马灯形式
                    this.playList = newVal.musicList.map(rowItem => {
                        return {
                            id: rowItem.id,
                            data: rowItem.data.map(columnItem => {
                                return {
                                    id: columnItem.albumId,
                                    title: columnItem.name,
                                    picUrl: columnItem.img1v1Url,
                                    hasPlayCount: false,
                                    isCircle: true,
                                    hasAuthor: false,
                                    titleIsLeft: false,
                                    alias: JSON.parse(JSON.stringify(columnItem.alias)),
                                    accountId: columnItem.accountId,
                                    fansCount: columnItem.fansCount,
                                    musicSize: columnItem.musicSize,
                                    hasPlayIcon: true
                                }
                            })
                        }
                    })
                } else if (newVal.type === TOPLIST) {
                    // 排行榜列表
                    this.playList = newVal.musicList.map(rowItem => {
                        return {
                            id: rowItem.id,
                            data: rowItem.data.map(columnItem => {
                                return {
                                    id: columnItem.id,
                                    title: columnItem.name,
                                    picUrl: columnItem.coverImgUrl,
                                    hasPlayCount: true,
                                    isCircle: false,
                                    hasAuthor: true,
                                    titleIsLeft: true,
                                    author: columnItem.updateFrequency,
                                    description: columnItem.description,
                                    playCount: columnItem.playCount,
                                    // 用于点击跳转
                                    itemType: newVal.type,
                                    hasPlayIcon: true
                                }
                            })
                        }
                    })
                } else if (newVal.type === SINGERSMVs || newVal.type === SINGERSMVsNOTIME) {
                    // mv列表
                    this.playList = newVal.musicList.map(rowItem => {
                        return {
                            id: rowItem.id,
                            data: rowItem.data.map(columnItem => {
                                let author = '', picUrl = ''
                                switch (newVal.type) {
                                    case SINGERSMVs:
                                        // 歌手详情页面的mv列表
                                        author = columnItem.publishTime
                                        picUrl = columnItem.imgurl16v9
                                        break
                                    case SINGERSMVsNOTIME:
                                        // mv视频下边的更多视频
                                        author = columnItem.artistName
                                        picUrl = columnItem.cover
                                        break
                                }
                                return {
                                    id: columnItem.id,
                                    title: columnItem.name,
                                    picUrl,
                                    hasPlayCount: false,
                                    isCircle: false,
                                    hasAuthor: true,
                                    titleIsLeft: true,
                                    author,
                                    itemType: newVal.type,
                                    hasPlayIcon: false
                                }
                            })
                        }
                    })
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
</style>